<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta http-equiv="cache-control" content="no-cache" />
		<title>告警事件</title>
		<link rel="stylesheet" href="../../assets/less/base/main.css" />
		<link rel="stylesheet" href="../../assets/less/message/notice.css" />
	</head>

	<body>
		<div id="app">
			<div class="iot-device-message" :style="{'height': height}" v-show="isShow">
				<div class="page-list">
					<template v-if="messageList&&messageList.length > 0">
						<div class="message-box" v-for="(item,index) in messageList" :key="index">
							<div class="message-header">
								<div class="message-title-badge message-title-badge-green"></div>
								<span class="message-title">{{getMessageTitle(item.title)}}</span>
							</div>
							<div class="message-content" :style="{ width: item.imageContent ? '74%' : '100%' }">
								{{ item.textContent&&item.textContent.length>30?item.textContent.substring(0,50)+'...':item.textContent }}
							</div>
							<img :src="item.imageContent" class="iot-el-img message-content-img"
								v-if="item.imageContent"></img>
							<div class="message-footer">
								<div class="footer-time">{{ util.formatDate(item.createDateTime) }}</div>
								<div class="footer-deal">{{ item.confirmor ? '已处理' : '未处理' }}</div>
							</div>
						</div>
					</template>
				</div>
			</div>
		</div>
		<script src="../../config.js"></script>
		<script src="../../assets/js/main.js" type="module"></script>
		<script type="module">
			// 右侧图表页面ID
			// 创建Vue实例
			new Vue({
				el: '#app', // 绑定元素
				data: {
					pageNo: 1,
					pageSize: 1,
					messageList: [],
					pageType: 'message',
					height: '500px',
					isShow: false,
					connection: null,
				},
				mounted() {
					var result = util.queryUrlParams(location.href)
					let pageType = util.isNotEmpty(result) ? result['pageType'] : 'message'
					this.pageType = pageType || 'message'
					let height = util.isNotEmpty(result) ? result['height'] : '500'
					this.height = (height || '500') + 'px'
					this.isShow = true

                    if(util.isNotEmpty(result)){
                        let msg={
                            title: decodeURIComponent(result['title']),
                            imageContent: decodeURIComponent(result['imageContent']),
                            textContent: decodeURIComponent(result['textContent']),
                            createDateTime: decodeURIComponent(result['createDateTime']),
                            confirmor: decodeURIComponent(result['confirmor']),
                        }
                        this.messageList = [msg]
                    }
				},
				methods: {
					getMessageTitle(title) {
						let str = title
						if (title && title.indexOf('|') != -1) {
							let arr = title.split('|')
							if (arr.length >= 3) {
								str = arr[0] + '-' + arr[1] + ' 触发了 ' + arr[2] + ' 事件'
							} else if (arr.length == 2) {
								str = arr[0] + '触发了 ' + arr[1] + ' 事件'
							}
						}
						return str
					}
				}
			})
		</script>
	</body>

</html>